<template>
  <div class="product">
    <ul v-if="goodsList.length !== 0">
      <li
        v-for="item in goodsList"
        :key="item.id"
        @click="toProductDetail(item.id)"
      >
        <img
          :src="item.list_pic_url"
          width="100%"
          style="display: block"
          alt=""
        />
        <div class="product-title">{{ item.name }}</div>
        <p class="product-price">{{ item.retail_price | moneyFilters }}</p>
      </li>
    </ul>
    <div v-else>
      <van-empty
        description="很抱歉！暂时没有该类商品，我们会尽快上传，请先选择其他类别"
      />
    </div>
  </div>
</template>
 
<script>
export default {
  name: "",
  props: ["goodsList"],
  data() {
    return {};
  },
  methods: {
    toProductDetail(id) {
      this.$router.push({
        path: "/productdetail",
        query: {
          id,
        },
      });
    },
  },
};
</script>
 
<style lang="less" scpoed>
.product {
  // background: #fff;
  ul {
    display: flex;
    padding: 0.1rem;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      background: #fff;
      width: 49%;
      margin-bottom: 0.1rem;
      text-align: center;
      .product-title {
        margin-top: 0.05rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .product-price {
        margin-top: 0.05rem;
        color: red;
        line-height: 0.3rem;
      }
    }
  }
}
</style>